<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TreeView</title>
<script>
function gid(id){return document.getElementById(id);}
function TreeNodeClick(obj)
{
	var strDisplay=obj.src.indexOf("Collapse.gif")>0 ? "none":"";
	var children=gid(obj.id.replace("img_","")).getAttributeNode("childids").nodeValue;
	if (children=="") return;
	var arr=children.split(",");
	for(var i=0,j=arr.length;i<j;i++)
	{
		gid(arr[i]).style.display=strDisplay;
		ExpandTreeNode(gid(arr[i]),strDisplay);
	}
	if (strDisplay=="none")
		obj.src=obj.src.replace("Collapse.gif","Expand.gif");
	else
		obj.src=obj.src.replace("Expand.gif","Collapse.gif");
}
function ExpandTreeNode(obj,mode)
{
	if(obj==null) return;
	var img=gid("img_"+obj.id)
	if(img==null) return;
	var strDisplay=img.src.indexOf("Collapse.gif")>0 ? "":"none";
	if (strDisplay=="none" && mode=="block") return;
	var objchildren=gid(obj.id.replace("img_",""));
	if(objchildren==null) return;
	var children=objchildren.getAttributeNode("childids").nodeValue;
	if (children=="") return;
	var arr=children.split(",");
	for(var i=0,j=arr.length;i<j;i++)
	{
		gid(arr[i]).style.display=mode;
		ExpandTreeNode(gid(arr[i]),mode);
	}
}
</script>
</head>
<body>
<table width="500" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
  <tr id="0" depth="0" childids="1,2,6" bgcolor="#FFFFFF">
    <td width="210" height="30"><span style="padding-left:0px;"></span>&nbsp;<img id="img_0" onClick="TreeNodeClick(this);" src="Collapse.gif" width="20" height="20">Root    </td>
    <td width="75">id=0</td>
    <td width="68">depth=0</td>
    <td width="147">childid=1,2,6</td>
  </tr>
  <tr id="1" depth="1" childids="" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:40px;"></span>&nbsp;1</td>
    <td>1</td>
    <td>1</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="2" depth="1" childids="3" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:20px;"></span>&nbsp;<img id="img_2" onClick="TreeNodeClick(this);" src="Collapse.gif" width="20" height="20">2</td>
    <td>2</td>
    <td>1</td>
    <td>3</td>
  </tr>
  <tr id="3" depth="2" childids="4,5" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:40px;"></span>&nbsp;<img id="img_3" onClick="TreeNodeClick(this);" src="Collapse.gif" width="20" height="20">21</td>
    <td>3</td>
    <td>2</td>
    <td>4,5</td>
  </tr>
  <tr id="4" depth="3" childids="" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:80px;"></span>&nbsp;211</td>
    <td>4</td>
    <td>3</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="5" depth="3" childids="" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:80px;"></span>&nbsp;212</td>
    <td>5</td>
    <td>3</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="6" depth="1" childids="7" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:20px;"></span>&nbsp;<img id="img_6" onClick="TreeNodeClick(this);" src="Collapse.gif" width="20" height="20">3</td>
    <td>6</td>
    <td>1</td>
    <td>7</td>
  </tr>
  <tr id="7" depth="2" childids="" bgcolor="#FFFFFF">
    <td height="30"><span style="padding-left:60px;"></span>&nbsp;31</td>
    <td>7</td>
    <td>2</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
